<template>
  <div class="group_buy_people">
    <tableComponents
      :pagination="{currentPage,pageSize:pagesize,total:shop_list.all_num}"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      :isHaveExport="false"
      :isHaveAdd="false"
      @sendUserSearch="getSearch"
      :searchData="cateSearchData"
    >
      <template v-slot:table>
        <el-table
          ref="multipleTable"
          stripe
          v-loading="loading"
          header-row-class-name="head_color"
          :data="shop_list.data"
          tooltip-effect="dark"
          style="width: 99.8%"
        >
          <el-table-column label="商品标题" min-width="70" align="center">
            <template slot-scope="scope">
              <div class="tab_div">
                <div>
                  <span>{{scope.row.product.title}}</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="商品价格" min-width="70" align="center">
            <template slot-scope="scope">
              <div class="tab_div">
                <div>
                  <span>{{$fnc.toFixedZ(scope.row.product.price)}}</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="商品图片" min-width="100" align="center">
            <template slot-scope="scope">
              <div class="tab_div">
                <div class="img_bor">
                  <img :src="$fnc.getImgUrl(scope.row.product.piclink)" alt />
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="用户头像" min-width="80">
            <template slot-scope="scope">
              <div class="tab_div">
                <div class="img_bor_tx">
                  <img :src="$fnc.getImgUrl(scope.row.avatar)" alt />
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="用户信息" min-width="70" align="center">
            <template slot-scope="scope">
              <div class="tab_div">
                <div>
                  <span>用户账号：</span>
                  <span>{{scope.row.username}}</span>
                </div>
                <div>
                  <span>用户名：</span>
                  <span>{{scope.row.nickname}}</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="添加时间" min-width="70" align="center">
            <template slot-scope="scope">{{scope.row.created_time | getTimeFormat}}</template>
          </el-table-column>

          <el-table-column label="拼购状态" min-width="70" align="center">
            <template slot-scope="scope">
              <div class="tab_div">
                <el-tag v-if="scope.row.status == 0" type="success" effect="dark">拼购中</el-tag>
                <el-tag v-if="scope.row.status == 1" type="danger" effect="dark">已开奖</el-tag>
                <el-tag v-if="scope.row.status == 2" type="danger" effect="dark">活动取消</el-tag>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="用户中奖状态" min-width="70" align="center">
            <template slot-scope="scope">
              <div class="tab_div">
                <el-tag v-if="scope.row.user_status == 0" type="success" effect="dark">拼购中</el-tag>
                <el-tag v-if="scope.row.user_status == 1" type="danger" effect="dark">已拼中</el-tag>
                <el-tag v-if="scope.row.user_status == 2" type="info" effect="dark">未拼中</el-tag>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>
  </div>
</template>

<script>
import { groupbuyPeople } from "@/assets/js/searchData/searchData"; //引入搜索的数据

export default {
  name: "group_buy_people",
  data() {
    return {
      cateSearchData: groupbuyPeople,
      shop_list: {
        data: [],
      },
      loading: false,
      pagesize: 10,
      currentPage: 1,
      formLabelWidth: "120px",
      searchAll: {},
    };
  },
  components: {},
  created() {
    this.getGroupBuyPeopleSearch();
  },
  mounted() {},
  methods: {
    getSearch(obj) {
      this.searchAll = obj;
      this.getGroupBuyPeopleSearch(1);
    },
    getGroupBuyPeopleSearch(page) {
      this.loading = true;
      var params = {};
      params = this.searchAll || {};
      params.page = page;
      params.page_size = this.pagesize;
      params.gid = this.$route.query.gid;
      params.phase = this.$route.query.phase;
      this.$api.getGroupbuy.getGroupbuyPeople(params).then((res) => {
        if (res.data.code == 200) {
          this.shop_list = res.data.result;
        }
        this.loading = false;
      });
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      //每页下拉显示数据
      this.pagesize = size;
      this.getGroupBuyPeopleSearch(1);
    },
    handleCurrentChange: function (currentPage) {
      //点击第几页
      this.currentPage = parseInt(currentPage);
      this.getGroupBuyPeopleSearch(this.currentPage);
    },
  },
};
</script>
<style lang='less' scoped>
</style>
